<!--
 * @Author: luoyong/471826078@qq.com
 * @Date: 2020-07-02 09:57:17
 * @LastEditors: younghxp
-->
<template>
  <div class="instranceRecord">
    <el-row>
      <el-col :span="24">
        <div class="secondaryTitle secondaryTitleTheme">项目延期记录</div>
      </el-col>
    </el-row>
    <div class="instranceRecordInfo">
      <div class="el-col color333 fontWeight">
        开工日期：
        <span class="information">{{ beginDate }}</span>
      </div>
      <div class="el-col color333 fontWeight">
        建设周期：
        <span class="information">{{ times }}天</span>
      </div>
      <div class="el-col color333 fontWeight">
        计划竣工日期：
        <span class="information">{{ endDate }}</span>
      </div>
      <el-link class="upload" type="primary" v-sdc @click="addDelayRecord"
        >添加延期记录</el-link
      >
    </div>
    <div style="margin-left: 16px">
      <el-table
        :data="tableList"
        empty-text="暂无信息，请及时补充"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
        ref="multipleTable"
      >
        <el-table-column
          prop="createTime"
          label="延期记录添加时间"
          width="180"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="delayDate"
          label="延期至"
          align="center"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="reason"
          label="延期原因"
          align="left"
          min-width="280"
        >
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.reason"
              :columnName="'reason'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column prop="action" width="180px" label="操作" align="left">
          <template slot-scope="scope">
            <el-link type="primary" @click="look(scope.row)"
              >延期申报证明附件</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      style="text-align: right; margin: 10px 0"
      @size-change="handleSizeChange1"
      @current-change="handleCurrentChange1"
      :current-page="pageNo"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 添加延期记录弹窗 -->
    <el-dialog
      title="添加项目延期记录"
      class="dialogDetail"
      :visible.sync="isShowDelay"
      width="640px"
      :modal-append-to-body="false"
      @close="resetForm('ruleForm')"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="开工日期：" prop="name">
          <p>{{ beginDate }}</p>
        </el-form-item>
        <el-form-item label="建设周期：" prop="telAreaCode">
          <p>{{ times }}天</p>
        </el-form-item>
        <el-form-item label="计划竣工日期：" prop="telNumber">
          <p>{{ endDate }}</p>
        </el-form-item>
        <el-form-item label="延期至：" prop="delayEnd">
          <el-date-picker
            v-model="form.delayEnd"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions0"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="延期原因：" prop="delayReason">
          <el-input
            v-model="form.delayReason"
            rows="3"
            class="mWidth"
            type="textarea"
            placeholder="请输入延期原因"
          ></el-input>
        </el-form-item>
        <el-form-item label="延期证明：" prop="upLoadFile">
          <uploadAnnex
            @getFileList="getFileList"
            :limitationFactor="limitationFactor"
            @getFile="getFile"
            :upLoadFile="upLoadFile"
          />
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <uploadResult
              style="margin-left: 120px !important"
              :resultList="upLoadFile"
              @callBackResult="getFile"
            />
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')" v-sdc class="cancel"
          >取 消</el-button
        >
        <el-button
          type="primary"
          class="save"
          style="width: 76px"
          :loading="btnloading"
          v-sdc
          @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 上传合同附件 -->
    <el-dialog
      title="延期证明"
      :visible.sync="uploadContract"
      :modal-append-to-body="false"
      width="900px"
      :append-to-body="true"
    >
      <uploadAnnex
        :limitationFactor="limitationFactorContract"
        @getFile="getFileContract"
        :upLoadFile="uploadImg1"
        @getFileList="getFileListTwo"
      />
      <div style="margin-top: 10px">
        <contractEnclosure
          :tableData="uploadImg1"
          :isDel="false"
          @changeFileList="getFileContract"
        ></contractEnclosure>
      </div>
      <!-- <el-table
        :data="uploadImg1"
        empty-text="暂无附件，请及时上传"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        highlight-current-row
        style="border:1px solid #dfe6ec;"
      >
        <el-table-column prop="createTime" label="上传时间" align="center"></el-table-column>
        <el-table-column prop="name" label="文件名称" align="center"></el-table-column>
        <el-table-column prop="contentType" label="文件格式" align="center">
          <template slot-scope="scope">
            <span>{{getFileType(scope.row.name)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link type="primary" @click="downloadRecords(scope.row)">下载附件</el-link>
          </template>
        </el-table-column>
      </el-table> -->
    </el-dialog>
  </div>
</template>
<script>
import common from '../../kits/common'

export default {
  name: 'projectDelay',
  data() {
    var checkUpLoadFile = (rule, value, callback) => {
      var that = this
      if (that.upLoadFile.length == 0) {
        return callback(new Error('延期证明不能为空'))
      } else {
        callback()
      }
    }
    return {
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.tableList.length) {
            let lastDate = this.tableList[0].delayDate
            return time.getTime() < new Date(lastDate)
          } else {
            return time.getTime() < new Date(this.endDate)
          }
        },
      },
      tableList: [],
      pageNo: 1,
      pageSize: 5,
      total: 0,
      isShow: false, //列表加载
      loading: false,
      beginDate: '--',
      endDate: '--',
      times: 0,
      isShowDelay: false,
      upLoadFile: [],
      srcList: [],
      oldSrcList: [],
      form: {
        delayEnd: '',
        delayReason: '',
        fileList: [],
      },
      btnloading: false,
      rules: {
        delayEnd: [
          {
            required: true,
            message: '请选择日期',
            trigger: 'change',
          },
        ],
        delayReason: [
          { required: true, message: '请输入延期原因', trigger: 'blur' },
          { max: 200, message: '长度最多200个字符', trigger: 'blur' },
        ],
        upLoadFile: [
          {
            required: true,
            validator: checkUpLoadFile,
            trigger: 'blur',
          },
        ],
      },
      isHover: false,

      recordId: '',
      uploadContract: false,
      uploadImg1: [],
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M”', //自定义报错提示语
        methodTip:
          '请上传延期证明文件或通告，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeOne', //自定义上传按钮类型
        messageFileSizetip: '最多能上传5M以内的附件',
      },
      limitationFactorContract: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 10, //自定义上传文件最大数量设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFour', //自定义上传格式校验类型
        fileId: 'salaryExcel1', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm1', //自定义id解决一个页面包含多个上传附件
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M”', //自定义报错提示语
        methodTip:
          '请上传延期证明文件或通告，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传10个附件', //自定义上传文件提示
        uploadBtnType: 'typeTwo', //自定义上传按钮类型
        UploadType: 'typeTwo',
      },
      upLoadFileTwo: [],
    }
  },

  props: {
    projectId: {
      type: String,
      required: true,
    },
  },
  watch: {
    projectId(val, val1) {
      this.getDelayInfo(val)
      this.getTableList(val, this.pageNo, this.pageSize)
    },
  },
  mounted() {
    if (this.$route.query.projectId) {
      this.getDelayInfo(this.$route.query.projectId)
      this.getTableList(this.$route.query.projectId, this.pageNo, this.pageSize)
    }
  },
  methods: {
    /**
     * @name: 截取文件后缀
     * @param {type}
     * @Author: luoyong
     */

    getFileType(file) {
      const fileName = file.lastIndexOf('.') // 取到文件名开始到最后一个点的长度
      const fileNameLen = file.length // 取到文件名长度
      const fileType = file.substring(fileName + 1, fileNameLen) // 截
      return '.' + fileType
    },
    getFileListTwo() {},
    /**
     * @name: 修改-打开上传附件弹窗
     * @param {string} id 参保记录id
     * @Author: luoyong
     */
    getDelayInfo(projectId) {
      this.axios({
        method: 'post',
        url: '/api-p/project/expand/initdata',
        data: {
          id: projectId,
        },
      })
        .then((response) => {
          if (!response.data.false) {
            this.beginDate = response.data.result.startDate
            this.times = response.data.result.cycle
            this.endDate = response.data.result.endDate
          } else {
            this.$message({
              message: resp.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {})
    },
    // 获取列表数据
    getTableList(projectId, pageNo, pageSize) {
      this.isShow = true
      this.loading = true
      this.axios({
        method: 'post',
        url: '/api-p/projectdelay/expand/delaylist',
        data: {
          projectId,
          pageNo,
          pageSize,
        },
      })
        .then((response) => {
          if (!response.data.false) {
            this.tableList = response.data.result.results
            this.total = response.data.result.totalCount
          } else {
            this.$message({
              message: resp.data.errorMsg,
              type: 'error',
            })
          }
          this.isShow = false
          this.loading = false
        })
        .catch((error) => {})
    },
    handleSizeChange1(val) {
      this.pageSize = val
      this.getTableList(this.projectId, this.pageNo, val)
    },
    handleCurrentChange1(val) {
      this.pageNo = val
      this.getTableList(this.projectId, val, this.pageSize)
    },
    /**
     * @name: 添加延期记录
     * @param {type}
     * @Author: luoyong
     */

    addDelayRecord() {
      this.isShowDelay = true
      //   this.form = {
      //     delayEnd: "",
      //     delayReason: "",
      //     fileList: [],
      //   };
      //   this.upLoadFile = [];
      //   this.srcList = [];
      //   this.oldSrcList = [];
      //   this.resetForm("ruleForm");
    },
    /**
     * @name: 表单重置
     * @param {type}
     * @Author: luoyong
     */
    resetForm(formName) {
      this.isShowDelay = false
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields()
        this.upLoadFile = []
      }
    },
    submitForm(formName) {
      var that = this
      that.form.fileList = JSON.stringify(that.upLoadFile)
      //   this.btnloading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.btnloading = true
          const { delayEnd, delayReason, fileList } = that.form
          this.axios({
            method: 'post',
            url: '/api-p/projectdelay/expand/adddelay',
            data: {
              projectId: that.projectId,
              delayDate: delayEnd,
              reason: delayReason,
              fileList,
            },
          })
            .then((response) => {
              //   this.canLogin = false;
              if (!response.data.hasError) {
                this.btnloading = false
                this.$message({
                  type: 'success',
                  message: '延期记录添加成功',
                })
                this.isShowDelay = false
                this.getTableList(this.projectId, this.pageNo, this.pageSize)
              } else {
                this.$message({
                  type: 'error',
                  message: '保存失败',
                })
              }
            })
            .catch((error) => {
              this.btnloading = false
            })
        } else {
          this.btnloading = false
          return false
        }
      })
    },
    /**
     * @name: 查看延期申请附件
     * @param {type} object table行数据
     * @Author: luoyong
     */

    look(item) {
      this.uploadContract = true
      this.recordId = item.id
      this.uploadImg1 = []
      //   this.saveImgArr1 = [];
      //   this.srcList1 = [];
      //   this.oldSrcList1 = [];
      this.getUploadFiles(item.id)
    },
    mouseroverInput() {
      this.isHover = true
    },
    mouserleaveInput() {
      this.isHover = false
    },

    /**
     * @description: 改变图片地址
     */
    changeSrcList(val) {
      this.srcList = val
    },
    /**
     * @name: 获取已上传的附件
     * @param {string} recordId 备案记录id
     * @Author: luoyong
     */
    getUploadFiles(delayId) {
      this.axios({
        method: 'post',
        url: '/api-p/projectdelay/expand/delayfiles',
        data: { delayId },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.uploadImg1 = response.data.result ? response.data.result : []
            for (var i = 0; i < this.uploadImg1.length; i++) {
              this.saveImgArr1.push({
                originalName: this.uploadImg[i].originalName,
                relativePath: this.uploadImg[i].relativePath,
                fileSize: this.uploadImg[i].fileSize,
                fileType: this.uploadImg[i].fileType,
              })
              this.srcList1.push(this.uploadImg[i].absolutePath)
              this.oldSrcList1.push(this.uploadImg[i].absolutePath)
            }
          } else {
            this.$message({
              type: 'error',
              message: '数据获取失败',
            })
          }
        })
        .catch((error) => {})
    },
    delFile1(index) {
      let id = this.uploadImg[index].id
      this.axios({
        method: 'post',
        url: '/api-e/cs/emprecord/expand/delfile',
        data: {
          fileIds: JSON.stringify([id]),
        },
      }).then((response) => {
        this.canLogin = false
        if (!response.data.hasError) {
          this.uploadImg.splice(index, 1)
          this.saveImgArr.splice(index, 1)
        }
      })
    },
    cancelUpload() {
      this.uploadContract = false
    },
    //保存附件
    saveUpload1(uploadImg) {
      // this.canLogin = true;
      var data = {
        fileList: JSON.stringify(uploadImg),
        delayId: this.recordId,
      }
      this.axios({
        method: 'post',
        url: '/api-p/projectdelay/expand/addfile',
        data: data,
      })
        .then((response) => {
          this.canLogin = false
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '附件上传成功',
            })
            this.getUploadFiles(this.recordId)
          } else {
            this.$message({
              type: 'error',
              message: '保存失败',
            })
          }
        })
        .catch((error) => {
          this.canLogin = false
        })
    },
    downloadRecords(item) {
      window.location.href = item.url
    },
    // 添加延期记录上传附件 --- start
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    getFile(val) {
      this.upLoadFile = val
    },
    // 添加延期记录上传附件 --- end
    getFileContract(val) {
      this.saveUpload1([val])
    },
  },
}
</script>
<style lang="less" scoped>
.instranceRecordInfo {
  color: #666;
}
.instranceRecord {
  background-color: #fff;
  padding: 24px 24px 1px;
  &Info {
    position: relative;
    margin-top: 13px;
    margin-left: 16px;
    font-size: 14px;
    .el-col {
      height: 36px;
      line-height: 36px;
      display: inline-block;
      margin-right: 45px;
    }
    .upload {
      position: absolute;
      top: 8px;
      right: 0;
    }
  }
  .el-table {
    margin-top: 5px;
  }
}
.title {
  position: relative;
  padding-left: 20px;
  height: 36px;
  line-height: 36px;
  font-weight: bold;
  font-size: 16px;
  &::before {
    position: absolute;
    content: '';
    width: 4px;
    height: 24px;
    left: 0;
    top: 6px;
    background: #265faa;
  }
  &Tips {
    font-size: 14px;
    margin-left: 16px;
  }
}

// 上传图片
.uploadBox {
  position: relative;
  .uploadImg {
    width: 96px;
    height: 36px;
    color: #009588;
    border: 1px solid #009588;
    line-height: 10px;
  }
  .uploadImgState {
    font-size: 14px;
    color: #999999;
    margin-left: 12px;
  }
  .upLoadDom {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    border-radius: 18px;
    input {
      width: 96px;
      height: 36px;
      border-radius: 18px;
      vertical-align: middle;
    }
    &:hover {
      .uploadImg {
        background-color: #0ff;
      }
    }
  }
}
.imgStyle {
  //   padding-left: 130px;
  li {
    position: relative;
    margin-right: 20px;
    margin-top: 10px;
    i {
      position: absolute;
      right: -6px;
      top: -10px;
      font-size: 20px;
    }
  }
}
.information {
  font-size: 14px;
  color: #666;
  line-height: 36px;
  font-weight: 400;
}
</style>
